<template>
    <main-wrap :loading="true" :load="getList" :end="finished" :overText="custom_list.length==0 ? ' ':''">
        <template v-slot:header>
            <!-- <div class="scbox">
                <my-search v-model.trim="searchParams.keyword" @serach="keySearch" icon="" placeholder="请输入姓名或来源等关键字搜查"/>
                <div class="sxbox" @click="showPopSearch=true">
                    <van-icon name="filter-o" size="26px"/>
                </div>
            </div> -->
            <top-search v-if="loadingOver" :options="{keyword,start_time,end_time}" @search="doneTopSearch"/>
        </template>
        <div>
            <ul class="otlist" v-if="custom_list">
                <li v-for="dt in custom_list" :key="dt._id">
                    <RouterLink :to="{ name: 'Cdetail',query:{cuid:dt.external_userid,muid:dt.follow_info.userid} }">
                        <div class="headImg"><Image :url="dt.avatar"/></div>
                        <div class="txt">
                            <h5>
                                {{dt.name}}
                                <span v-for="dt2 in dt.tags" :key="dt2.tag_name">{{dt2.tag_name}}</span>
                            </h5>
                            <p>来源：<span style="color: #2d9105;">{{dt.state}} {{addWayFormat(dt.add_way)}}</span></p>
                            <p>由 {{dt.follow_info.name}}于 {{timestampFormat(dt.follow_createTime)}} 添加</p>
                            
                        </div>
                        <div class="go"><i class="iconfont iconfangxiangjiantou"></i></div>
                    </RouterLink>
                </li>
            </ul>
            <van-empty  v-if="custom_list && custom_list.length==0" description="暂无数据" />
            <!-- <RouterLink :to="{ name: 'About' }">About</RouterLink> -->
        </div>
        <!-- <template v-slot:footer>
            <footer-nav/>
        </template> -->
        <van-popup v-model:show="showPopSearch" position="right" :style="{ width: '80%', height: '100%' }">
            <index-search @close="showPopSearch=false" @search="doSearch"/>
        </van-popup>
    </main-wrap>
</template>
<script setup>
import { ref,onMounted,nextTick } from "vue";
import {useRouter} from 'vue-router'
import Image from "@/components/image.vue"
import indexSearch from "./components/indexSearch.vue"
import topSearch from "@/components/topSearch.vue"
import {
    syncCustomByUserid,
    updateMember,
    getMemberIdList,
    getMemberList,
    getCustomList
} from '@/api/qy-wechat-api'
import {toast,loading,clearToast} from '@/utils/vant'
import {timestampFormat,addWayFormat} from '@/utils/convert'
import { useUserStore } from '@/stores/modules/user'
import mainWrap from '@/components/mainWrap.vue'
import mySearch from '@/components/mySearch.vue'
import footerNav from '@/components/footerNav.vue'

const router = useRouter()
const userStore = useUserStore()

const custom_list = ref('')
let pageSize = 20
let pageIndex = 1
const searchParams = ref({
    isUsable:true
}) 
const showPopSearch = ref(false)
const finished = ref(false)
const start_time = ref('')
const end_time = ref('')
const keyword = ref('')
const loadingOver = ref(false)

onMounted(async ()=>{
    //console.log("userInfo:",userStore.userInfo)
    await nextTick()

    loadingOver.value = true
    const {currentRoute} = router
    if(currentRoute._value.query.starttime){
        start_time.value = currentRoute._value.query.starttime
        searchParams.value.start_time = start_time.value
    }
    if(currentRoute._value.query.endtime){
        end_time.value = currentRoute._value.query.endtime
        searchParams.value.end_time = end_time.value
    }
    if(currentRoute._value.query.keyword){
        keyword.value = currentRoute._value.query.keyword
        searchParams.value.keyword = keyword.value
    }
    if(currentRoute._value.query.userid){
        searchParams.value.userIds = [currentRoute._value.query.userid]
    }
    getList()
})

const getList = async ()=>{
    return new Promise((resolve, reject) => {
        setTimeout(async () => {
            const res = await getCustomList({pageSize,pageIndex,...searchParams.value})
            custom_list.value = [...custom_list.value, ...res.data.data];
            pageIndex++;
            if (custom_list.value.length >= res.data.total) {
              finished.value = true;
            }
            resolve(true);
        }, 500);
    });

    // const res = await getCustomList({pageSize,pageIndex,...searchParams.value})
    // if(res.code == 200){
    //     custom_list.value = res.data.data
    // }else{
    //     return toast('获取数据出错了！')
    // }
    
}
const doneTopSearch = (params)=>{
    if(params.keyword){
        searchParams.value.keyword = params.keyword
    }
    if(params.start_time){
        searchParams.value.start_time = params.start_time
        start_time.value = params.start_time
    }
    if(params.end_time){
        searchParams.value.end_time = params.end_time
        end_time.value = params.end_time
    }
    pageIndex = 0
    custom_list.value = ''
    getList()
}
const keySearch = ()=>{
    pageIndex = 0
    custom_list.value = ''
    getList()
}
const doSearch = (params)=>{
    pageIndex = 0
    custom_list.value = ''
   // console.log("params:",params)
    if(params.tagIds.length>0){
        searchParams.value.tagIds = params.tagIds
    }else{
        delete searchParams.value.tagIds
    }
    if(params.userIds.length>0){
        searchParams.value.userIds = params.userIds
    }else{
        delete searchParams.value.userIds
    }
    getList()
}

</script>

<style lang="scss">
.scbox{
    display: flex;
    padding: 0 0 15px 0;
    .sxbox{
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 0 20px 0 0;
    }
}
.otlist{
    padding: 10px 0 0 0;
    li{
        line-height: 40px;
        border-bottom:1px solid #f2f2f2;
        &+li{
            margin-top: 10px;
        }
        a{
            display: flex;
            padding: 25px 0;
            padding-left: 25px;
            background-color: #fff;
            .headImg{
                width: 120px;
                height: 120px;
                border-radius:50% ;
                background: #fff;
                overflow: hidden;
            }
            .txt{
                flex: 1;
                padding: 0 0 0 20px;
                h5{
                    display: flex;
                    font-size: 28px;
                    span{
                        height: 40px;
                        line-height: 40px;
                        font-size: 20px;
                        color: #000;
                        background-color: #ebf1eb;
                        border-radius: 5px;
                        padding: 0 8px;
                        margin: 0 0 0 8px;
                    }
                }
                p{
                    overflow: hidden;
                    color: #999999;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    line-clamp: 1;
                    -webkit-box-orient: vertical;
                    font-size: 26px;
                }
            }
            .go{
                width: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                i{
                    color: #999;
                }
            }
        }
    }
}
</style>